<template>
	<div class="tpl-view">
		<el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
			<el-tab-pane
			v-for="(item, index) in editableTabs"
			:key="item.name"
			:label="item.title"
			:name="item.name"
			>
			<editor ref="ace" v-model="item.content" width="100%" height="100%" :theme="aceTheme" :lang="item.lang" :options="options" @init="initEditor"></editor>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
export default {
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			editableTabsValue: '',//默认展示第1个Tab
			editableTabs: [
				// {
				// 	title: 'Tab 1',
				// 	path: '/file/Tab 1',
				// 	name: '1',
				// 	content: 'Tab 1 content',
				// 	lang: 'html'
				// }, 
				// {
				// 	title: 'Tab 2',
				// 	path: '/file/Tab 2',
				// 	name: '2',
				// 	content: '<html><head></head><body>1111\n1111</body></html>',
				// 	lang: 'html'
				// }
			],
			tabIndex: 0,//目前有几个Tab
			/*关于ace参数，参考https://www.jianshu.com/p/8a4a5e273538*/
			options: {
				enableBasicAutocompletion: true,
				enableSnippets: true,
				enableLiveAutocompletion: true,//自动补全
				tabSize: 2,
				fontSize: 14,
				showPrintMargin: false,   //去除编辑器里的竖线
				readOnly: false,   //只读
			},
			aceTheme: 'chrome'//ace主题
		};
	},
	created: function() {
		/*权限判断显示*/
		// this.header.buttons[0].auth = (judgeAuth('tplinfoList', this.allMenuList) == undefined)?false:true
		/*获取单个模版内容*/
		this.getTplContent()
	},
	watch: {
		/*监听路由 分类ID 变化*/
		'$route' (to, from){
			// console.log(to.query.file)
			let has = false//默认没有打开该页面
			let _this = this
			this.editableTabs.forEach((v) => {
				if(v.path == this.$route.query.file){
					has = true//已经打开了
					_this.editableTabsValue = v.name
					console.log(v.path)
				}
			})
			if(!has){
				this.getTplContent()
			}
		}
	},
	methods: {
		/*初始化编辑器*/
		initEditor:function (editor) {
			require('brace/theme/' + this.aceTheme)
			require('brace/ext/language_tools') //language extension prerequsite...
			require('brace/mode/html')
			require('brace/mode/css')
			require('brace/mode/javascript')
			require('brace/mode/json')
		},
		/*增加Tab*/
		addTab(path, content) {
			// console.log(this.editableTabs.length, 2)
			let newTabName = ++this.tabIndex + '';
			let tmp = this.$route.query.file.split('.')
			let tmp2 = this.$route.query.file.split('/')
			let lang = this.fileType(tmp[tmp.length - 1])
			let fileName = tmp2[tmp2.length - 1]
			console.log(fileName)
			this.editableTabs.push({
				title: fileName,
				path: path,
				name: newTabName,
				content: content,
				lang: lang
			});
			this.editableTabsValue = newTabName;
		},
		/*删除Tab*/
		removeTab(targetName) {
			// console.log(targetName, 11)
			let tabs = this.editableTabs;
			// console.log(tabs, 22)
			let activeName = this.editableTabsValue;
			// console.log(activeName, 33)
			if (activeName === targetName) {
				tabs.forEach((tab, index) => {
					if (tab.name == targetName) {
					console.log(tab.name + '-' + targetName)
						let nextTab = tabs[index + 1] || tabs[index - 1];
						if (nextTab) {
							activeName = nextTab.name;
						}
					}
				});
			}
			this.editableTabsValue = activeName;
        	this.editableTabs = tabs.filter(tab => tab.name !== targetName);
		},
		/*获取单个模版内容*/
		getTplContent: function(){
			/*判断是否 为二进制文件*/
			let tmp = this.$route.query.file.split('.')
			// console.log(tmp[tmp.length - 1])
			let type = tmp[tmp.length - 1]
			if(type == 'jpg' || type == 'jpeg' || type == 'png' || type == 'gif'){
				console.log('查看图片')
				return;
			}
			if(this.$api.tplContent != undefined){
				this.$baseURL(this.$domain.cms)
				this.$get(this.$api.tplContent, {
					'appid': this.appid,
					'id': this.$route.query.id,
					'path': this.$route.query.file,
				}).then(res => {
					// console.log(res)
					if(res.data.code === 0){
						// this.editableTabs[this.editableTabsValue-1].content = res.data.data
						this.addTab(this.$route.query.file, res.data.data)
						this.loading = false
					}
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false
				})
			}else{
				this.$message({
					showClose: true,
					message: '没有查看模版内容的权限',
					type: 'error'
				});
			}
		},
	},
	computed: {
		/*返回文件的类型*/
		fileType(val) {
			return function (val) {
				let file = {
					'html': 'html',
					'css': 'css',
					'js': 'javascript',
					'json': 'json',
				}
				return (file[val])
			}
		}
	},
	components: {
		editor: require("vue2-ace-editor")
	},
};
</script>

<style lang="stylus" scoped>
.tpl-view
	height: 100%
	.el-tabs
		height: 100%
		/deep/ .el-tabs__content
			padding: 0
			height: calc(100% - 39px)
			.el-tab-pane
				height: 100% !important
				.ace_gutter, .ace_layer
					height: 100% !important
</style>